<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人机大战之成语接龙</title>
<style>
h1{
	color:red;
}
input{
	padding: 8px;
	border-radius: 6px;
}
.history{
	border: 1px solid gray;
	border-radius: 8px;
	padding: 10px;
}
form >div:nth-child(2){
	display: flex;
	gap: 10px;
	padding-top: 20px;
}
.msg{
	color:red;
	font-weight: bold;
	margin: 10px 0;
}
</style>
</head>
<body><%
request.setCharacterEncoding("utf-8");
String cy=request.getParameter("cy");
String history=request.getParameter("history");
out.print(cy+"\t"+history);
if(cy!=null){
	
}
history=",一清二白,白面儒生,生生不息,息息相关,114514,cnm";
%>
<div class='kuang'>
	<h1>人机大战之成语接龙</h1>
	<div class='history'>
<%
	String[] cys=history.split(",");
for(int i=1; i<cys.length;i++){
	out.println("\t\t<p>"+i+".["+(i%2==0?"机":"人")+"]"+cys[i]+"</p>");
}
%>		
	</div>
	<form method="post" action="">
		<div class='msg'></div>
		<div class='panal'>
			<input type='text' name='cy' />
			<input type="submit" value='提交' onclick='return check()'/>
			<input type="button" value='重新开始' onclick='return again()'/>
			<input type='hidden' name='history' value=',一清二白,白面儒生,生生不息,息息相关' />
		</div>
	</form>
</div>
<script>
const $=function(selector){
	return document.querySelector(selector)
}

function check(){
	let first='关'
	let cy=$('input[name=cy]').value.trim()
	
	//if(cy.length<3||cy.length>14){
		//document.querySelector('.msg').innerText='成语的长度应该有3~14汉字~'
	try{
		if(cy.length<3||cy.length>14)throw new Error('成语的长度应该有3~14个汉字~')
		if(!cy.startsWith(first)) throw new Error('输入的成语必须以“关”字开头')
		return true
	}catch(e){
		$('.msg').innerText=e.message
		return false
	}
	
}
</script>

</body>
</html>
